<template>
  <div class="video">
    <!-- 头部标题 -->
    <div class="head_tit">
      <div class="tit_fl">
        <img @click="$router.go(-1)" class="tit_fl_img" src="../assets/myImg/back@2x.png" alt />
      </div>
      <span>我的收藏</span>
    </div>
    <!-- <div class="video_head"></div> -->
    <!-- 底部商品选择详情 -->
    <div class="product">
      <scroll
        class="content"
        ref="scroll"
        :probe-type="3"
        :pull-up-load="true"
        @touchEnd="touchEnd"
        :maxHeight="88"
        @scroll="contentScroll"
      >
        <!-- 下方详情 -->
        <ul class="product_deta">
          <li
            class="product_deta_item"
            @click="goVideoDetail(item.video.chapter_id)"
            v-for="(item,index) in collectList"
            :key="index"
          >
            <img class="deta_item_img" :src="item.video.chapter_avatar" alt />
            <div class="deta_item_fr">
              <h2 class="fr_h2">{{item.video.chapter_name}}</h2>
              <div class="fr_sp" v-html="item.video.desc"></div>
              <div class="fr_con">
                <div class="con_fl">
                  <!-- <img class="con_fl_img" src="../assets/img/huo@2x.png" alt /> -->
                  <!-- <span>36984</span> -->
                </div>
                <span>{{ item.video.create_time | moment}}</span>
              </div>
            </div>
          </li>
          <li class="isShowTit" v-show="isShowTit">暂无更多数据</li>
        </ul>
      </scroll>
    </div>
    <BackTop @click.native="clickTop" v-show="isShowBackTop"></BackTop>
  </div>
</template>

<script>
import moment from "moment";
import Scroll from "../components/common/scroll/Scroll";
// 节流函数
import { throtTling } from "../utils/throttling";
import { getAllCollect } from "../api/myHarvest";

export default {
  components: { Scroll },
  name: "Video",
  data() {
    return {
      collectList: "",
      // 每页几条数据
      limit: 5,
      // 页数
      page: 1,
      // 是否显示暂无数据
      isShowTit: false,
      // 返回顶部
      isShowBackTop: false,
    };
  },
  methods: {
    // 获取收藏数据
    getAllCollect() {
      let that = this;
      getAllCollect(this.limit, this.page).then((res) => {
        if (res.code == 200) {
          that.collectList = res.data.data;
        } else {
          that.$toast({
            duration: 2000,
            message: res.msg,
          });
        }
      });
    },
    // 点击进入视频详情
    goVideoDetail(id) {
      this.$router.push({ name: "VideoDetail", query: { id } });
    },
    // 返回顶部
    clickTop() {
      this.$refs.scroll.scrollTo(0, 0);
    },
    // 监听滚动
    contentScroll(position) {
      if (position.y < -300) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }
    },
    // 上拉加载更多
    touchEnd: throtTling(function (y) {
      if (y < -120 && !this.isShowTit) {
        let pages = (this.page += 1);
        getAllCollect(this.limit, pages).then((res) => {
          if (res.code == 200) {
            this.collectList.push(...res.data.data);
            this.page += 1;
            this.isShowTit = false;
          } else {
            this.isShowTit = true;
          }
        });
        this.$refs.scroll.finishPullUp();
        // 重新计算高度
        this.$refs.scroll.refresh();
      }
    }, 2000),
  },
  filters: {
    moment(type) {
      return moment(type).format("YYYY/MM/DD");
    },
  },

  mounted() {
    this.getAllCollect();
  },
};
</script>

<style lang="less" scoped>
.video {
  margin: 0 0.373333rem;
}

.head_tit {
  position: relative;
  text-align: center;
  color: #333;
  font-weight: 700;
  height: 1.333333rem;
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  .tit_fl {
    position: absolute;
    left: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    border-radius: 50%;
    .tit_fl_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
  }
}

.video_head {
  height: 3.813333rem;
  background: url(../assets/myImg/banner@2x.png) no-repeat;
  background-size: 100% 100%;
}
// 底部商品展示详情
.product {
  height: 8rem;
  background: #fff;
  .product_deta {
    .product_deta_item {
      display: flex;
      justify-content: space-between;
      padding: 0.266667rem;
      margin-top: 0.266667rem;
      border: 0.013333rem solid #eee;
      // height: 2.2rem;
      .deta_item_img {
        width: 3.48rem;
        height: 2rem;
      }
      .deta_item_fr {
        margin-left: 0.266667rem;
        flex: 1;
        font-size: 0.293333rem;
        color: #6a6f72;
        .fr_h2 {
          margin: 0.266667rem 0;
          font-size: 0.346667rem;
          color: #282e36;
        }
        .fr_sp {
          width: 5rem;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fr_con {
          display: flex;
          justify-content: space-between;
          padding-right: 0.5rem;
          margin-top: 0.106667rem;
          height: 0.533333rem;
          .con_fl {
            color: #ff6801;
            .con_fl_img {
              margin-right: 0.133333rem;
              width: 0.293333rem;
              height: 0.293333rem;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>